﻿
@{
    ViewData["Title"] = "电子文件";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section Head{
    <link href="~/layuiadmin/style/style.css" rel="stylesheet" />
    <style>
        .layui-input:focus {
            border-color: #1ab394 !important;
        }

        .layui-input {
            height: 30px !important;
        }

        .layui-form-select {
            width: 100px;
            display: inline-block;
        }

        .layui-btn + .layui-btn {
            margin-left: 0;
        }

        .layui-btn {
            margin-top: -3px;
        }

        .text-success {
            color: #1c84c6;
        }

        .layui-btn-container {
            margin: 0 !important;
        }
    </style>
}

<div id="dMain">
    <div class="layui-row">
        <div class="layui-card">
            <div class="layui-card-header">电子文件</div>
            <div class="layui-card-body">
                <div class="layui-form">
                    <input type="text" class="layui-input" name="txtFileNo" id="txtFileNo" lay-verify="txtFileNo" placeholder="档号" autocomplete="off" style="width:120px;display: inline-block;" />
                    <select name="ddlFTerm" id="ddlFTerm">
                        <option value="-- 期限 --">-- 期限 --</option>
                        <option value="1">永久</option>
                        <option value="2">长期</option>
                        <option value="2">60年</option>
                        <option value="3">短期</option>
                        <option value="3">30年</option>
                    </select>
                    <input type="text" class="layui-input" name="txtAY" id="txtAY" lay-verify="txtAY" placeholder="案由" autocomplete="off" style="width:200px;display: inline-block;" />
                    <button class="layui-btn layui-btn-sm">快速检索</button>
                    <button class="layui-btn layui-btn-sm">综合检索</button>
                    <button class="layui-btn layui-btn-sm">查看全部</button>
                </div>
                <table id="tabData" lay-filter="demo" style="margin-top: 10px;"></table>
            </div>
        </div>
    </div>
</div>

<script>
    window.onload = function () {
        layui.use('table', function () {
            var table = layui.table;

            table.render({
                elem: '#tabData',
                toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                page: true,
                height: 600,
                cols: [[
                    { type: 'checkbox' },
                    { field: 'DH', title: '档号', width: 100, align: "center", sort: true },
                    { field: 'Blamer1', title: '责任者', width: 180, sort: true },
                    { field: 'Blamer2', title: '文号', width: 150, sort: true },
                    { field: 'RealExp', title: '题名', width: 600 },
                    { field: 'ReturnYear', title: '归档年度', width: 100, align: "center", sort: true },
                    { field: 'Term', title: '保管期限', width: 100, align: "center", sort: true },
                    { field: 'ItemNo', title: '件号', width: 80, align: "center", sort: true },
                    { field: 'ReturnDate', title: '归档日期', width: 100, align: "center"},
                    { field: 'FormDate', title: '形成时间', width: 100, align: "center"},  
                    { field: 'SecretLevel', title: '密级', width: 100, align: "center" },
                    { field: 'Remark', title: '备注', width: 250, align: "center" },
                    { field: 'caozuo', title: '操作', width: 100, align: "center", templet: barDemo }
                ]],
                data: [{
                    "XH": "1",
                    "DH": "1",
                    "STFLH": "2",
                    "Blamer1": "3",
                    "RealExp": "4",
                    "ReturnYear": "5",
                    "Term": "6",
                    "ItemNo": "7",
                    "ReturnDate": "1",
                    "FormDate": "10",
                    "Remark": "11"
                }]
            });
        });

        layui.use('form', function () {
            var form = layui.form;
        })

        layui.use('table', function () {
            var table = layui.table;
            //监听工具条
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event === 'detail') {
                    layer.msg('ID：' + data.id + ' 的查看操作');
                } else if (obj.event === 'del') {
                    layer.confirm('确定删除此行数据？', function (index) {
                        obj.del();
                        layer.close(index);
                    });
                } else if (obj.event === 'edit') {
                    layer.alert('编辑' + JSON.stringify(data))
                }
            });
        });
    }
</script>

<script type="text/html" id="barDemo">
    <a class="text-success" lay-event="edit">编辑</a> &nbsp;
    <a class="text-danger" lay-event="del">删除</a>
</script>

<script type="text/html" id="toolbarDemo">
    <div class="MenuManager-title"></div>
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="">添加信息</button>
    </div>
    <div class="layui-inline layui-inline-secate">
        <input class="layui-input" name="id" id="test-table-demoReload" autocomplete="off" placeholder="搜索" data-type="reload">
    </div>
</script>